<template>
  <!-- <div>
    <el-popover
      v-model="visible"
      placement="bottom"
      width="160"
    >
      <p>这是一段内容这是一段内容确定删除吗1？</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="visible = false">确定</el-button>
      </div>

    </el-popover>
    <slot>
      <el-button type="danger" size="mini" @click="visible = true">删1除</el-button>
    </slot>

  </div> -->
  <div>
    <el-popover
      v-model="visible"
      placement="top"
      width="160"
    >
      <p>确定要删除吗？</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="sure">确定</el-button>
      </div>
      <el-button slot="reference" :type="$props.type" size="mini">删除</el-button>
    </el-popover>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'danger'
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    sure() {
      this.visible = false
      this.$emit('delete-item')
    }
  }
}
</script>
